{
	const dataset = [
		[34, 78],
		[109, 280],
		[310, 120],
		[79, 411],
		[420, 220],
		[233, 145],
		[333, 96],
		[222, 333],
		[78, 320],
		[21, 123]
	];

	const w = 500;
	const h = 500;
	const padding = 60;

	const xScale = d3.scale.linear()
		.domain([0, d3.max(dataset, (d) => d[0])])
		.range([padding, w - padding]);

	const yScale = d3.scale.linear()
		.domain([0, d3.max(dataset, (d) => d[1])])
		.range([h - padding, padding]);

	const svg = d3.select("#box29")
		.append("svg")
		.attr("width", w)
		.attr("height", h);

	svg.selectAll("circle")
		.data(dataset)
		.enter()
		.append("circle")
		.attr("cx", (d) => xScale(d[0]))
		.attr("cy", (d) => yScale(d[1]))
		.attr("r", (d) => 5);

	svg.selectAll("text")
		.data(dataset)
		.enter()
		.append("text")
		.text((d) => (d[0] + "," + d[1]))
		.attr("x", (d) => xScale(d[0] + 10))
		.attr("y", (d) => yScale(d[1]))

	// 新版本写法
	// const xAxis = d3.axisBottom(xScale);
	// const yAxis = d3.axisLeft(yScale)
	// 旧版本写法
	const xAxis = d3.svg.axis().scale(xScale).orient("buttom")
	const yAxis = d3.svg.axis().scale(yScale).orient("left")
	
	svg.append("g")
		.attr("transform", "translate(0," + (h - padding) + ")")
		.call(xAxis);

	svg.append("g")
		.attr("transform", "translate(" + padding + ",0)")
		.call(yAxis);

}
